
<style>

    #chatList { width: 748px; padding: 20px 40px; border-bottom: 1px solid  #b4b4b4; overflow: scroll; }
    .msg { font-size: 12px; width: 668px; }

    .msg .ll, .msg .rr { width: 36px; }
    .msg .ll  .img { float: left; }
    .msg .rr { }
    .msg .mm { vertical-align: top;  }
    .msg .time { position: relative; left: 50%; transform: translate(-50%, 0); text-align: center; font-size: 11px; color: #898989; line-height: 30px; }
    .msg .avatar {  }
    .msg .avatar img { width: 36px; height: 36px; border-radius: 50%; }

    .msg .message { display: inline-block; position: relative; margin-left: 20px; background: #0bce93; color: #191919; line-height: 22px; border-radius: 5px; margin-bottom: 20px; max-width: 550px; padding: 4px 10px; word-wrap: break-word; margin-top: 3px; }
    .msg .messageleft { display: inline-block; max-width: 550px;  position: relative; float: right; margin-right: 20px; margin-top: 3px; line-height: 22px; border-radius: 5px; margin-bottom: 20px; padding: 4px 10px; color: #000;  background: #e6e6e6; margin-top: 2px;  word-wrap: break-word; }
    .message:after { position: absolute;
        top: 9px;
        left: -12px;
        content: '';
        border: 6px solid transparent;
        border-right: 6px solid #0bce93; }
    .messageleft:after { position: absolute;
        top: 9px;
        right: -12px;
        content: '';
        border: 6px solid transparent;
        border-left: 6px solid #e6e6e6; }



    .comment{  }
    .com_form{    }


    input[type="text"] {  }

    .com_form p{  }

    span.emotion {  }



    .qqFace{ }

    .qqFace table td{ }

    .qqFace table td img{ }

    .qqFace table td img:hover{ }

    .qingsu { width: 748px; height: 110px; line-height: 24px; padding: 10px 0 0 10px; }

    .sub_btn { width: 70px; height: 30px; text-align: center;    line-height: 30px; color: #fff; font-size: 14px; font-weight: bold; background: #ef6b6d; display: block; margin: 0 0 10px 660px; }

    ul {display:block;}
    li {list-style: none;}
    li div {
        display: inline-block;
        margin-top: 2px;
        vertical-align: middle;
    }

    div p{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
        border: none;
    }

    .left{ width: 10%; }

    .center{ width: 75%;  }

    .right{ width: 10%;  }

    .txt{
        width:300px;font-size: 14px;line-height: 24px;overflow: hidden;
        margin: 5px 0;white-space: nowrap;text-overflow: ellipsis;color: #898989;
    }
    a{
        text-decoration: none;
    }
</style>

<div class="ucenter fix" style="margin: 0 auto; width: 748px;">

    <div class="main">

        <div id="chatBox">
            <table id="chatList">
                <{if $chatList|@count == 0}>
                <span style="margin-left: 200px">暂无聊天记录</span>
                <{else}>

                <ul>

                    <{foreach from=$chatList item="v"}>
                    <li>
                        <div class="left">
                            <img style="border-radius:50%" src="<{$v.userIcon}>" height="50px">
                        </div>
                        <div class="center">
                            <p style="font-size: 16px;color: #1b1b1b;"><{$v.userName}></p>
                            <div style="height: 24px;" class="txt"><{$v.message}></div>
                        </div>
                        <div class="right">
                            <p style=""><a href="/admin/chat/user/<{if $v.uid}><{$v.uid}><{else}><{$v.guiderId}><{/if}>?id=<{$chatUid}>">查看</a></p>
                        </div>
                    </li>
                    <{/foreach}>
                </ul>

                <{/if}>

            </table>
        </div>
    </div>
  <!--  <a style="float: right" href="javascript:;" onclick="close()">关闭</a>-->
</div>
<script>
    function close(){
        window.opener=null;window.open('','_self');window.close();
    }
</script>